<template>
    <div class="inputPwd">
        <mt-field :placeholder="tips" type="password" v-model="inputValuePwd" v-show="!isShowPwd"  @input="clickEvent">
            <mt-button type="default" size="small" @click.native="isShowPwd=true">
                <i class="icon iconfont icon-close-eye"></i>
            </mt-button>
        </mt-field>
        <mt-field :placeholder="tips" type="text" v-model="inputValuePwd" v-show="isShowPwd"  @input="clickEvent">
            <mt-button type="default" size="small" @click.native="isShowPwd=false">
                <i class="icon iconfont icon-ai-eye"></i>
            </mt-button>
        </mt-field>
    </div>
</template>

<script>
export default {
    name: 'App',
    data(){
        return{
            inputValuePwd:'',
            isShowPwd:false,
        }
    },
    props:{
        tips:{
            type: String,
            default:'请输入密码'
        }
    },
    methods:{
        clickEvent(){
            this.$emit('sendPwdToParent',this.inputValuePwd);
        },
    }
}
</script>

<style lang="stylus" scoped>
 .inputPwd{
    .mint-cell-wrapper{
        .mint-button--small{
            color:#5F88FF;
            font-size:22px;
            background:transparent;
            box-shadow:0 0 1px transparent;
            &::after{
                background-color:transparent;
            }
        }
    }
}
</style>
